<template>
  <div class="code-highlight-container">
    <pre class="matrix-code" v-html="highlightedCode"></pre>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  code: {
    type: String,
    default: ''
  },
  language: {
    type: String,
    default: 'html'
  }
})

// 简单的HTML语法高亮
const highlightedCode = computed(() => {
  if (!props.code) return '// 等待生成HTML代码...'
  
  let highlighted = props.code
  
  // HTML标签高亮
  highlighted = highlighted.replace(
    /(&lt;\/?[^&gt;]+&gt;|<\/?[^>]+>)/g,
    '<span class="html-tag">$1</span>'
  )
  
  // CSS属性高亮
  highlighted = highlighted.replace(
    /(\w+)\s*:/g,
    '<span class="css-property">$1</span>:'
  )
  
  // 字符串高亮
  highlighted = highlighted.replace(
    /(["'])((?:(?!\1)[^\\]|\\.)*)\1/g,
    '<span class="string">$1$2$1</span>'
  )
  
  // 注释高亮
  highlighted = highlighted.replace(
    /(<!--[\s\S]*?-->|\/\*[\s\S]*?\*\/|\/\/.*$)/gm,
    '<span class="comment">$1</span>'
  )
  
  // 数字高亮
  highlighted = highlighted.replace(
    /\b(\d+(?:\.\d+)?(?:px|em|rem|%|vh|vw)?)\b/g,
    '<span class="number">$1</span>'
  )
  
  return highlighted
})
</script>

<style scoped>
.code-highlight-container {
  height: 100%;
  overflow: auto;
}

.matrix-code {
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-shadow: 0 0 5px #00ff00;
  margin: 0;
  padding: 0;
}

.matrix-code :deep(.html-tag) {
  color: #ff6b6b;
  text-shadow: 0 0 5px #ff6b6b;
}

.matrix-code :deep(.css-property) {
  color: #4ecdc4;
  text-shadow: 0 0 5px #4ecdc4;
}

.matrix-code :deep(.string) {
  color: #ffe66d;
  text-shadow: 0 0 5px #ffe66d;
}

.matrix-code :deep(.comment) {
  color: #888;
  font-style: italic;
  text-shadow: 0 0 3px #888;
}

.matrix-code :deep(.number) {
  color: #ff9ff3;
  text-shadow: 0 0 5px #ff9ff3;
}

/* 滚动条样式 */
.code-highlight-container::-webkit-scrollbar {
  width: 8px;
}

.code-highlight-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
}

.code-highlight-container::-webkit-scrollbar-thumb {
  background: #00ff00;
  border-radius: 4px;
}

.code-highlight-container::-webkit-scrollbar-thumb:hover {
  background: #00cc00;
}
</style>